<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/p5_卡片切换/style.css">
  <title>Document</title>
</head>
<body>
   <div class="slide-container">
      <span class="slider-span" id="slider-span1"></span>
      <span class="slider-span" id="slider-span2"></span>
      <span class="slider-span" id="slider-span3"></span>
      <span class="slider-span" id="slider-span4"></span>
      <span class="slider-span" id="slider-span5"></span>
      <span class="slider-span" id="slider-span6"></span>
      <span class="slider-span" id="slider-span7"></span>
   </div>
   <div class="image-slider">
    <div class="slide-div" id="slide-1">
      <img src="/p5_卡片切换/1.jpeg" class="img" id="img1">
      <a href="#slider-span1" class="button" id="button-1"> </a>
    </div>
    <div class="slide-div" id="slide-2">
      <img src="/p5_卡片切换/2.jpeg" class="img" id="img2">
      <a href="#slider-span2" class="button" id="button-2"> </a>
    </div>
    <div class="slide-div" id="slide-3">
      <img src="/p5_卡片切换/3.jpeg" class="img" id="img3">
      <a href="#slider-span3" class="button" id="button-3"> </a>
    </div>
    <div class="slide-div" id="slide-4">
      <img src="/p5_卡片切换/4.jpeg" class="img" id="img4">
      <a href="#slider-span4" class="button" id="button-4"> </a>
    </div>
    <div class="slide-div" id="slide-5">
      <img src="/p5_卡片切换/5.jpeg" class="img" id="img5">
      <a href="#slider-span5" class="button" id="button-5"> </a>
    </div>
    <div class="slide-div" id="slide-6">
      <img src="/p5_卡片切换/6.jpeg" class="img" id="img6">
      <a href="#slider-span6" class="button" id="button-6"> </a>
    </div>
    <div class="slide-div" id="slide-7">
      <img src="/p5_卡片切换/7.jpeg" class="img" id="img7">
      <a href="#slider-span7" class="button" id="button-7"> </a>
    </div>

   </div>
</body>
</html>